<template>
  <ContentField>
    <h1>对战记录</h1>
    <a-table
      :columns="columns"
      :data-source="records"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.title === '选手A'">
          <a-avatar :size="64" :src="text.a_avatar" /> {{ text.a_username }}
        </template>
        <template v-if="column.title === '选手B'">
          <a-avatar :size="64" :src="text.b_avatar" /> {{ text.b_username }}
        </template>
        <template v-if="column.title === '对战结果'">
          {{ loser(text.loser) }}
        </template>
        <template v-if="column.title === '对战时间'">
          {{ text.createTime }}
        </template>
        <template v-if="column.title === '操作'">
          <a-button @click="open_record_content(text.record)"
            >观看回放</a-button
          >
        </template>
      </template>
    </a-table>
  </ContentField>
</template>

<script>
import ContentField from "@/components/ContentField";
import { useStore } from "vuex";
import recodeApi from "@/apis/recodeApi";
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
import router from "@/router";

const columns = [
  {
    title: "选手A",
    width: "20%",
  },
  {
    title: "选手B",
    width: "20%",
  },
  {
    title: "对战结果",
    dataIndex: "record",
    width: "20%",
  },
  {
    title: "对战时间",
    dataIndex: "record",
    width: "20%",
  },
  {
    title: "操作",
    width: "20%",
  },
];

export default {
  name: "RecordView",
  components: {
    ContentField,
  },
  setup() {
    const store = useStore();

    const access = store.state.user.info.access;

    const limit = ref(5);
    const page = ref(1);

    const current = ref(5);
    const records = ref([]);
    const total = ref("");

    recodeApi.getBots(limit.value, page.value, access).then((resp) => {
      total.value = resp.data.total;
      records.value = resp.data.records;
      current.value = resp.data.current;
    });

    const chagePage = (limit, page, access) => {
      recodeApi.getBots(limit, page, access).then((resp) => {
        total.value = resp.data.total;
        records.value = resp.data.records;
        current.value = resp.data.current;
      });
    };

    const pagination = computed(() => ({
      total: total.value,
      current: current.value,
      pageSize: limit.value,
    }));

    const handleTableChange = (pag) => {
      limit.value = pag.pageSize;
      page.value = pag.current;
      chagePage(pag.pageSize, pag.current, access);
    };

    const loser = (loser_info) => {
      if (loser_info === "A") {
        return "B获得胜利✌";
      } else if (loser_info === "B") {
        return "A获得胜利✌";
      } else {
        return "平局";
      }
    };

    const open_record_content = (record) => {
      store.commit("updateIsRecord", true);
      store.commit("updateGamemap", JSON.parse(record.map));
      store.commit("updateGameM", {
        a_id: record.aid,
        a_sx: record.asx,
        a_sy: record.axy,
        b_id: record.bid,
        b_sx: record.bsx,
        b_sy: record.bxy,
      });
      store.commit("updateSteps", {
        a_step: JSON.parse(record.asteps),
        b_step: JSON.parse(record.bsteps),
      });

      store.commit("updateRecordLoser", record.loser);
      router.push({
        name: "record_content",
        params: {
          recordId: record.id,
        },
      });
    };

    return {
      records,
      total,
      current,
      columns,

      pagination,

      loser,
      handleTableChange,
      open_record_content,
    };
  },
};
</script>

<style scoped>
</style>